<template>
<bm-marker :position="this.position" @click="locationClick()" @mouseover="locationOver()" @mouseout="locationLeave()" :icon="this.icons">
</bm-marker>
</template>

<script>
export default {
    data() {
        return {
            icons: this.icon,
        };
    },
    props: ["stationId", "icon", "position","areaName"],

    methods: {
        locationClick() {
            this.icons = {
                url: "../../static/img/stalv3.png",
                size: {
                    width: 32,
                    height: 42
                },
                opts: {
                    anchor: {
                        width: 40,
                        height: -11.5
                    },
                },
            };
            this.$emit("showBusDataLocation", this.stationId,this.position,this.areaName);
        },
        locationOver() {
            this.icons = {
                url: "../../static/img/stalv2.png",
                size: {
                    width: 30,
                    height: 46
                },
                opts: {
                    anchor: {
                        width: 38,
                        height: -9.5
                    },
                },
            };
        },
        locationLeave() {
            this.icons = {
                url: "../../static/img/stalv1.png",
                size: {
                    width: 27,
                    height: 35
                },
                opts: {
                    anchor: {
                        width: 35,
                        height: -15
                    },
                },
            };
        },
    },
};
</script>

<style>
.sample {
    position: absolute;
}
</style>
